<template>
  <div class="auth-status">
    <el-card>
      <template #header>
        <span>认证状态检查</span>
      </template>
      
      <div class="status-info">
        <div class="status-item">
          <span class="label">Token状态:</span>
          <el-tag :type="hasToken ? 'success' : 'danger'">
            {{ hasToken ? '已登录' : '未登录' }}
          </el-tag>
        </div>
        
        <div class="status-item" v-if="hasToken">
          <span class="label">Token:</span>
          <code class="token-display">{{ tokenDisplay }}</code>
        </div>
        
        <div class="status-item" v-if="userInfo">
          <span class="label">用户信息:</span>
          <span>{{ userInfo.username || userInfo.email }}</span>
        </div>
        
        <div class="status-item">
          <span class="label">API地址:</span>
          <span>{{ apiBaseURL }}</span>
        </div>
      </div>
      
      <div class="actions">
        <el-button v-if="!hasToken" type="primary" @click="goToLogin">
          去登录
        </el-button>
        <el-button v-else @click="testAPI">
          测试API
        </el-button>
        <el-button @click="clearAuth">
          清除认证
        </el-button>
      </div>
      
      <div class="test-result" v-if="testResult">
        <h4>API测试结果:</h4>
        <pre>{{ testResult }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { userAPI } from '@/api'

const router = useRouter()

const token = ref('')
const userInfo = ref(null)
const testResult = ref('')

const hasToken = computed(() => !!token.value)
const tokenDisplay = computed(() => {
  if (!token.value) return ''
  return token.value.length > 20 ? 
    token.value.substring(0, 20) + '...' : 
    token.value
})

const apiBaseURL = computed(() => {
  return 'http://localhost:7002/api/v1'
})

const loadAuthInfo = () => {
  token.value = localStorage.getItem('token') || ''
  const userInfoStr = localStorage.getItem('userInfo')
  if (userInfoStr) {
    try {
      userInfo.value = JSON.parse(userInfoStr)
    } catch (e) {
      console.error('解析用户信息失败:', e)
    }
  }
}

const goToLogin = () => {
  router.push('/login')
}

const clearAuth = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  token.value = ''
  userInfo.value = null
  testResult.value = ''
  ElMessage.success('认证信息已清除')
}

const testAPI = async () => {
  try {
    testResult.value = '测试中...'
    
    // 测试用户信息接口
    const response = await userAPI.getProfile()
    
    testResult.value = JSON.stringify({
      success: true,
      code: response.code,
      message: response.message,
      data: response.data
    }, null, 2)
    
    ElMessage.success('API测试成功')
  } catch (error) {
    testResult.value = JSON.stringify({
      success: false,
      error: error.message,
      response: error.response?.data
    }, null, 2)
    
    ElMessage.error('API测试失败')
  }
}

onMounted(() => {
  loadAuthInfo()
})
</script>

<style scoped>
.auth-status {
  max-width: 600px;
  margin: 20px auto;
}

.status-info {
  margin-bottom: 20px;
}

.status-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.label {
  width: 100px;
  font-weight: 500;
  color: #666;
}

.token-display {
  background: #f5f5f5;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
}

.actions {
  margin-bottom: 20px;
}

.actions .el-button {
  margin-right: 12px;
}

.test-result {
  border-top: 1px solid #eee;
  padding-top: 16px;
}

.test-result h4 {
  margin: 0 0 8px 0;
  color: #333;
}

.test-result pre {
  background: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  font-size: 12px;
  overflow-x: auto;
  max-height: 300px;
}
</style>
